<template>
	<view class="abbr">
		<!-- <view class="public">
			<view class="card_title">我的待办</view>
			<view class="flexBox flexBox1" style="justify-content: space-around;">
				<view>
					<view>3</view>
					<view>回收工单</view>
				</view>
				<view>
					<view>2</view>
					<view>清点工单</view>
				</view>
				<view>
					<view>100</view>
					<view>临时工单</view>
				</view>
			</view>
		</view> -->

		<view class="public">
			<view class="card_title">工作台</view>
			<view class="flexBox flexBox2">
				<view @click="goPage(1)">
					<view>收</view>
					<view>回收</view>
				</view>
				<view @click="goPage(2)">
					<view>清</view>
					<view>清点</view>
				</view>
				<view @click="goPage(3)">
					<view>分</view>
					<view>分拣</view>
				</view>
				<view @click="goPage(4)">
					<view>架</view>
					<view>货架</view>
				</view>
				<view @click="goPage(5)">
					<view>检</view>
					<view>检测</view>
				</view>
				<view @click="goPage(6)">
					<view>拆</view>
					<view>拆卸</view>
				</view>
				<view @click="goPage(15)">
					<view>销</view>
					<view>销毁</view>
				</view>
				<view @click="goPage(7)">
					<view>入</view>
					<view>入库</view>
				</view>
				<view @click="goPage(8)">
					<view>临</view>
					<view>临时</view>
				</view>
				<view @click="goPage(13)">
					<view>复</view>
					<view>复检</view>
				</view>
				<view @click="goPage(14)">
					<view>仓</view>
					<view>仓库</view>
				</view>
				<!-- <view @click="goPage(16)">
					<view>售</view>
					<view>销售</view>
				</view>
				<view @click="goPage(17)">
					<view>出</view>
					<view>出库</view>
				</view>
				<view @click="goPage(18)">
					<view>退</view>
					<view>退货</view>
				</view> -->
			</view>
		</view>
		<view class="public">
			<view class="card_title">工作台</view>
			<view class="flexBox flexBox3">
				<view @click="goPage(9)">
					<view>快递</view>
				</view>
				<view @click="goPage(10)">
					<view>扫描</view>
				</view>
				<view @click="goPage(11)">
					<view>辅助</view>
				</view>
			</view>
		</view>
		<view class="tabbar">
			<tabbar value="0"></tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Index',
		onLoad() {
			this.$store.dispatch('user/getUserInfo');
		},
		methods: {
			goPage(index) {
				// 回收1 				清点2		分拣3 		货架4	  	检测5 			拆解6 			入库7			  临时8
				//Recycling, Counting, sorting, shelving, inspection, dismantling, warehousing, temporary
				console.log("111", index);
				let URL = '';
				switch (index) {
					case 1:
						URL = '/pages/view/recycle/index';
						break;
					case 2:
						URL = '/pages/view/count/index';
						break;
					case 3:
						URL = '/pages/view/sorting/index';
						break;
					case 4:
						URL = '/pages/view/shelv/index';
						break;
						// case 5:
						// 	URL = '/pages/view/inspect/index';
						// 	break;

					case 5:
						URL = '/pages/view/inspect_scan/detail';
						break;
						// case 6:
						// 	URL = '/pages/view/dismantle/index';
						// 	break;
					case 6:
						URL = '/pages/view/dismantle_scan/detail';
						break;
					case 7:
						URL = '/pages/view/house/index';
						break;
					case 8:
						URL = '/pages/view/temporary/index';
						break;
					case 9:
						URL = '/pages/view/delivery/index';
						break;
					case 11:
						URL = '/pages/view/assist/index';
						break;
					case 13:
						URL = '/pages/view/recheck/index';
						break;
					case 14:
						URL = '/pages/view/store/index';
						break;
					case 15:
						URL = '/pages/view/destroy/index';
						break;
					case 16:
						URL = '/pages/view/sale/index';
						break;
					case 17:
						URL = '/pages/view/outBound/index';
						break;
					case 18:
						URL = '/pages/view/return/index';
						break;
				}
				uni.navigateTo({
					url: URL
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.abbr {
		background-color: rgba(244, 249, 254, 1);
		height: 100vh;
		// position: absolute;
		// top: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;

		.public {
			background-color: #ffffff;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			border: 1px solid;
			border-color: rgba(0, 124, 233, 0.4);

			.card_title {
				font-size: larger;
				font-weight: bolder;
				border-bottom: 1px solid black;
			}

			.flexBox {
				display: flex;
				flex-flow: row wrap;
				align-content: flex-start;
				justify-content: flex-start;

				// justify-content: space-around;
				>view {
					box-sizing: border-box;
					flex: 0 0 25%;
					text-align: center;
					// margin-top: 20rpx;
					// border: 1px solid #00f;
					// height: 40px;
				}
			}

			.flexBox1 {
				>view {
					:nth-child(1) {
						font-size: x-large;
						color: black;
					}
				}
			}

			.flexBox2 {
				>view {
					padding: 30rpx;

					:nth-child(1) {
						background-color: #000000;
						color: white;
						font: larger bold;
						font-family: '楷体';
						aspect-ratio: 1/1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}

					:visited {
						background-color: #5500ff;
						color: whitesmoke;
					}

					:active {
						background-color: yellow;
						color: #5500ff;
						font: x-large bolder;
						font-family: '楷体';
					}
				}
			}

			.flexBox3 {
				justify-content: space-around;

				>view {
					padding: 10px;
					flex: 0 0 20%;

					:nth-child(1) {
						background-color: #000000;
						color: white;
						// font: larger bold;
						font-family: '楷体';
						aspect-ratio: 1/1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}

					:visited {
						background-color: #5500ff;
						color: whitesmoke;
					}

					:active {
						background-color: yellow;
						color: #5500ff;
						// font: x-large bolder;
						font-family: '楷体';
					}
				}
			}
		}

		.tabbar {
			position: sticky;
			bottom: 30upx;
			z-index: 999;
		}
	}
</style>
